<template>
<div>
	<router-link to="/home">Home</router-link> |
    <router-link to="/example/ExampleList1">ExampleList1</router-link> |
    <router-link to="/example/ExampleList2">ExampleList2</router-link> |
    <router-link to="/example/ExampleList3">ExampleList3</router-link> |
    <router-link to="/example/ExampleList4">ExampleList4</router-link>

    <component :is="currentLayout"></component>
</div>
</template>

<script>
import LayoutNone from '@/layout/LayoutNone'
import LayoutBase from '@/layout/LayoutBase'
import Layout1 from '@/layout/Layout1'
import Layout2 from '@/layout/Layout2'

export default {
	name: 'App',
	components: {
		LayoutNone,
		LayoutBase,
		Layout1,
		Layout2,
	},
	computed: {
		// 使用何种布局方式
		currentLayout () {
			return this.$route.meta.layout || 'LayoutNone';
		}
	}
}
</script>

<style>
</style>
